<template>
  <div>
    <div
      v-for="o in journalismForm"
      :key="o.id"
      class="text item"
      :v-model="journalismForm"
    >
      <el-card class="box-card" style="margin-right: 1rem; height: auto">
        <table style="width: 100%" class="s">
          <tr @click="handlexinwen()">
            <td style="padding-right: 1rem; border: solid 1px; width: 13%">
              <div class="demo-image" style="text-align: center">
                <img
                  src="../assets/logo.png"
                  style="
                    pointer-events: none;
                    width: 90px;
                    height: 90px;
                    background-repeat: no-repeat;
                  "
                  alt=""
                />
              </div>
            </td>
            <td style="text-align: center; padding-left: 1rem">
              <div style="text-align: center; margin-bottom: 0.5rem">
                <h1
                  style="
                    font-size: 32px;
                    font-family: '等线';
                    text-align: left;
                    padding-bottom: 0.5rem;
                  "
                >
                  {{ o.articleTitle }}
                </h1>
              </div>
              <div style="text-align: left">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="o.articleContent"
                  readonly="readonly"
                  class="input__textarea"
                  text
                >
                </el-input>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div style="text-align: right; margin-top: 0.5rem">
                <span>
                  <el-badge :value="12" class="item">
                    <el-button size="small">点赞数量</el-button>
                  </el-badge>

                  <el-badge :value="3" class="item">
                    <el-button size="small">评论数量</el-button>
                  </el-badge>

                  <el-badge :value="98" class="item" type="primary">
                    <el-button size="small">阅读数量</el-button>
                  </el-badge>

                  <el-badge :value="value" class="item" type="warning">
                    <el-button size="small">发布日期</el-button>
                  </el-badge>
                </span>
              </div>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
// import {GetArticles} from '../api/user'
export default {
  data () {
    return {
      value: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      journalismForm: [

      ]
    }
  },
  methods: {
    handlexinwen: function () {
      this.$router.push('article');

    },
    getArticles:function(){
          axios.get('https://cms.zt118.top/article/Articles').then(res => {
        res.data.data.forEach(item => {
          this.journalismForm.push(item);
          console.log(this.journalismForm);
        });
      }).catch();
    }
  },
  mounted: function () {
    this.getArticles();
  }

}
</script>

<style scoped>
.demo-image {
  /* background:#fff; */
  display: flex;
  text-align: center;
  align-items: center;
  cursor: unset;
}

.demo-image img {
  clear: both;
  display: block;
  margin: auto;
  width: 90px;
  height: 90px;
  align-items: center;
}
/* 文本域选择器属性 */
.el-input {
  border: none;
  float: left;
}
* {
  margin: 0px;
  padding: 0px;
  /* user-select: none; */
  font-family: '等线';
}

.el-tabs_nav-scroll {
  border: none;
  border-width: 1px;
  /* background-color: aquamarine */
}
/* 新闻推荐卡片效果 */
.s {
  cursor: pointer;
  user-select: none;
}
.s:hover {
  color: #409eff;
}
.el-f1 {
  width: 80%;
  float: left;
}
.el-f2 {
  float: left;
  /* background-color: aliceblue; */
  width: 19%;
  margin-left: 1px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.el-button {
  /* border: none; */
  border-width: 0.5rem;
  border-color: white;
  border-style: solid;
}
.box-card {
  /* height: 23%; */
  margin-bottom: 1rem;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>